<template>
  <div class="main">
    <!--    顶部导航条-->
    <navheader></navheader>
    <div class="user_main container-fluid">
      <!--中间主体内容-->
<!--      上面头像、个人信息-->
      <div class="top_main">
        <div class="row block m-5" >
          <!--        头像-->
          <el-avatar :size="160" style="margin-top: -40px;background-color:white;padding: 6px;border-color: #939aa2;">
            <el-avatar :size="150" :src="this.show_user_img"></el-avatar>
          </el-avatar>
          <!--        个人信息-->
          <div class="pl-3 pt-4">
            <h1>{{this.user_info.user_name}}</h1>
            <div class="" style="margin-left: 1000px">
              <div class="btn_attention btn btn-lg" type="btn" @click="submit()" v-if="this.attention_info==1">
                取消关注
              </div>
              <div class="btn_attention btn btn-lg" type="btn" @click="submit_attention()" v-else>
                关&nbsp;&nbsp;注
              </div>
            </div>
            <div class="row mt-3 ml-2">
              <div class="infoclassfont">{{this.user_info.sex}}</div>
              <div class="ml-2" style="background-color:#3f7e74;width: 3px;height: 28px"></div>
              <div class="infoclassfont pl-2">{{this.user_info.city}}</div>
              <div class="ml-2" style="background-color:#3f7e74;width: 3px;height: 28px"></div>
              <div class="infoclassfont pl-2">{{this.user_info.email}}</div>
              <div class="ml-2" style="background-color:#3f7e74;width: 3px;height: 28px"></div>
              <div class="infoclassfont pl-2">{{this.user_info.birthday}}</div>
              <div class="ml-2" style="background-color:#3f7e74;width: 3px;height: 28px"></div>
              <div class="infoclassfont pl-2" v-if="this.user_info.identity==0">学生</div>
              <div class="infoclassfont pl-2" v-if="this.user_info.identity==1">已毕业的学长学姐</div>
              <div class="infoclassfont pl-2" v-if="this.user_info.identity==2">老师</div>
              <div class="ml-2" style="background-color:#3f7e74;width: 3px;height: 28px"></div>
            </div>
            <div class="infoclassfont pt-3 pl-2">个人介绍：{{this.user_info.profile}}</div>


          </div>
        </div>

      </div>
<!--      下面部分-->
      <div class="row bottom_main mt-3">
<!--        左边-->
        <div class="col-md-3">
          <div class="left_main">
            <h5 class="border-bottom p-4 ml-5" style="font-size: 25px;color: black;font-weight: bold">个人成就</h5>
            <ul class="guide_list">
              <li class="pt-3"><i class="fa fa-commenting pr-2 fa-lg" style="color: #8d4353"></i>帖子内容获得{{this.user_info.cnt_post_comment}}次评论</li>
              <li class=""><i class="fa fa-github-alt pr-2 fa-lg" style="color: #3c2151"></i>积分{{this.user_info.credit}}分</li>
              <li class=""><i class="fa fa-user pr-2 fa-lg" style="color: #057a5b"></i>关注{{this.user_info.cnt_attention}}人</li>
              <li class=""><i class="fa fa-paper-plane pr-2 fa-lg" style="color: #0f5da2"></i>粉丝{{this.user_info.cnt_fans}}人</li>
            </ul>
          </div>
<!--          <div class="date mt-4">-->
<!--            <el-calendar v-model="value"-->
<!--                         style="background-color:rgba(255,255,255,0.9);-->
<!--            box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);-->
<!--            border-radius: 5px;">-->
<!--            </el-calendar>-->
<!--          </div>-->
        </div>

<!--          右边导航条切换-->
        <div class="right_main col-md-9">
          <div class="right_top_main">
            <el-menu
                router
                :default-active="$route.path"
                mode="horizontal"
                style="border-radius: 5px;"
                text-color="#939aa2"
                active-text-color="#0f5da2"
            >
              <el-menu-item index="/User_Main/User_Note" :route="{name:'User_Note',query:{user_id:this.user_id}}">
                <span slot="title" class="titlefontclass">记录本</span>
              </el-menu-item>
              <el-menu-item index="/User_Main/User_Post" :route="{name:'User_Post',query:{user_id:this.user_id}}">
                <span slot="title" class="titlefontclass">帖子</span>
              </el-menu-item>
              <el-menu-item index="/User_Main/User_Idle" :route="{name:'User_Idle',query:{user_id:this.user_id}}">
                <span slot="title" class="titlefontclass">闲置物品信息</span>
              </el-menu-item>
<!--              <el-menu-item index="/User_Main/User_Comment" :route="{name:'User_Comment',query:{user_id:this.user_id}}">-->
<!--                <span slot="title" class="titlefontclass">评论</span>-->
<!--              </el-menu-item>-->
            </el-menu>
          </div>

          <div class="right_bottom_main">
            <router-view></router-view>
          </div>
        </div>

      </div>

    </div>
    <!--    底部导航条-->
    <myfooter></myfooter>
  </div>

</template>

<script>
import myfooter from '../../myfooter'
import navheader from '../../navheader'
import {Attention_Info,getUser_Basic,cancelAttention,attention} from '@/api/User'

export default {
  name: "user_main",
  components:{
    myfooter,
    navheader,
  },
  data(){
    return{
      user_id:this.$route.query.user_id,
      user_info:{
        user_name:'',
        birthday:'',
        city:'',
        email:'',
        hobby:'',
        profile:'',
        sex:'',
        credit:'',
        identity:'',
        cnt_attention:0,
        cnt_fans:0,
        cnt_post_comment:0,
        img:'',

      },
      attention_info:0,
      value: new Date(),
      show_user_img:'',

    }
  },
  methods:{
    // 获取当前用户个人信息
    init(){

      getUser_Basic({
        user_id:this.user_id,
        user_now:'1',
      }).then(res=>{

        this.user_info.user_id=res.data.user_id;
        this.user_info.user_name=res.data.username;
        this.user_info.birthday=res.data.birthday;
        this.user_info.city=res.data.city;
        this.user_info.email=res.data.email;
        this.user_info.hobby=res.data.hobby;
        this.user_info.profile=res.data.profile;
        this.user_info.sex=res.data.sex;
        this.user_info.credit=res.data.credit;
        this.user_info.img=res.data.img;
        this.show_user_img='/api/storage/user_img/' + this.user_info.img;

        this.user_info.identity=res.data.identity;
        this.user_info.cnt_attention=res.data.cnt_attention;
        this.user_info.cnt_fans=res.data.cnt_fans;
        this.user_info.cnt_post_comment=res.data.cnt_post_comment;

        //获取关注情况
        Attention_Info({
          user_id:this.user_id,
        }).then(res_attention=>{
            if(res_attention.data.code==1){
              this.attention_info=1;
            }
            else{
              this.attention_info=0;
            }
        });

      });


    },
    //  取消关注
    submit(){

      //再次确认
      this.$confirm('确认取消关注?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {

        this.cancel_attention();

      }).catch(() => {
        this.$msg.error("取消！");
      });

    },
    cancel_attention(){
      cancelAttention({
        user_id:this.user_id,
      }).then(res=>{
        if(res.data.code===1){
          this.$msg.success("取消关注成功！")
        }else{
          this.$msg.error("取消关注失败！");
        }
        this.init();
      })

    },
  //  关注用户
    submit_attention(){
      //再次确认
      this.$confirm('确认关注?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {

        this.attention();

      }).catch(() => {
        this.$msg.error("取消！");
      });
    },
    attention(){

      attention({
        user_id:this.user_id,
        // token:window.sessionStorage.getItem('token')
      }).then(res=>{
        if(res.data.code===1){
          this.$msg.success("关注成功！")
        }else{
          this.$msg.error("关注失败！");
        }
        this.init();
      })

    },

  },
  created() {
    let _this=this;
    _this.init();

  }

}
</script>

<style scoped>
.main {
  background: url('~@/assets/user/personal_back.jpeg') no-repeat center;
  background-size:cover;
  width: 100%;
  background-attachment:fixed;
}

.user_main{
  width: 90%;
}
.top_main{
  /*width: 80%;*/
  border-radius: 5px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
  height: 220px;
  background-color:rgba(255,255,255,0.85);
  align-items: center;
  margin-top: 150px;

}

.left_main{
  border-radius: 5px;
  background-color:rgba(255,255,255,0.9);
  /*opacity: 0.5;*/
  height: 300px;
}

.guide_list li{
  font-size: 19px;
  padding-bottom: 20px;
  list-style:none
}
.guide_list li:hover{
  font-size: 20px;
}
.titlefontclass{
  font-size: 20px;
  font-weight: bold;
}
.titlefontclass:hover{
  color: #0f5da2;
}
.infoclassfont{
  font-size: 20px;
  color: #5b5b5b;
}
.btn_attention{
  border-color:#3f7e74;
  color: #3f7e74;
  font-size: 20px;
  font-weight: bold;
  float:right;
}
.btn_attention:hover{
  background-color: #3f7e74;
  color: white;
}
.right_bottom_main{
  /*height:800px;*/
  background-color:rgba(255,255,255,0.9);
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
  border-radius: 5px;
  /*margin-bottom: 100px;*/
}
/*.el-menu-item:hover{*/
/*  background-color:rgba(255,255,255,0.4);*/
/*}*/

</style>
